<script setup lang="ts">
import closeBtn from "@/assets/icons/close-white.svg";
import { ref } from "vue";
import { getAssetsFile } from "@/utils/map";
import dangerIcon from "@/assets/device/point-3.png";
import noNameIcon from "@/assets/device/point-2.png";
import personTrackIcon from "@/assets/icons/personTrack.png";
import personLocationIcon from "@/assets/icons/personLocation.svg";

const isShow = ref(true);
const emitEvents = defineEmits(["toggleShowLegend"]);
const props = defineProps({
  deviceCategoryList: {
    type: { point: Array<any>, line: Array<any> },
  },
});
const close = () => {
  emitEvents("toggleShowLegend");
};
const data = reactive([
  {
    id: 1,
    label: "管点图例",
    children: [],
  },
  {
    id: 2,
    label: "管段图例",
    children: [],
  },
  {
    id: 3,
    label: "巡检路线图例",
    children: [
      { id: 30, label: "巡检线路", isLine: true, image: "#FFBF6B" },
      {
        id: 31,
        label: "人员轨迹",
        isPoint: true,
        iconUrl: personTrackIcon,
        height: 3,
      },
      { id: 32, label: "人员定位", isPoint: true, iconUrl: personLocationIcon },
    ],
  },
  {
    id: 4,
    label: "区域图例",
    children: [
      {
        id: 40,
        label: "区域划分",
        isArea: true,
        bgColor: "#e4c7dc",
        borderColor: "purple",
      },
    ],
  },
  {
    id: 5,
    label: "其他图例",
    children: [
      {
        id: 50,
        label: "巡检隐患",
        iconUrl: dangerIcon,
        isPoint: true,
      },
      {
        id: 51,
        label: "巡检预警",
        iconUrl: noNameIcon,
        isPoint: true,
      },
    ],
  },
]);

onMounted(async () => {
  const pointNodes = props.deviceCategoryList.point.map((item: any) => {
    const { className, classId, image } = item;
    const iconUrl = getAssetsFile("device/" + image + ".png");
    return {
      isPoint: true,
      iconUrl,
      id: classId,
      label: className,
    };
  });
  const lineNodes = props.deviceCategoryList.line.map((item: any) => {
    const { className, classId, image } = item;
    return {
      isLine: true,
      image,
      id: classId,
      label: className,
    };
  });
  data[0].children = pointNodes;
  data[1].children = lineNodes;
});
const defaultProps = {
  children: "children",
  label: "label",
};
</script>

<template>
  <div class="legend" v-if="isShow">
    <div class="title">
      <span>图例展示</span>
      <img :src="closeBtn" alt="" class="close" @click="close" />
    </div>
    <el-tree
      class="tree"
      node-key="id"
      :data="data"
      :props="defaultProps"
      defaultExpandAll
    >
      <template #default="{ data }">
        <div class="custom-tree-node">
          <img
            class="imgTag"
            v-if="data.isPoint === true"
            :src="data.iconUrl"
            alt=""
            :style="'height:' + (data.height || 16) + 'px'"
          />
          <span
            class="colorTag"
            v-if="data.isLine"
            :style="'background:' + data.image"
          ></span>
          <span
            class="colorAreaTag"
            v-if="data.isArea"
            :style="
              'border:1px solid ' +
              data.borderColor +
              ';background:' +
              data.bgColor
            "
          ></span>
          <span class="pl-1" :title="data.label">{{ data.label }}</span>
        </div>
      </template>
    </el-tree>
  </div>
</template>

<style scoped lang="scss">
.legend {
  position: absolute;
  right: 47px;
  bottom: 90px;
  z-index: 1000;
  width: 268px;
  height: 640px;
  font-family: Roboto, sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: rgb(16 16 16 / 100%);
  text-align: center;
  background-color: rgb(255 255 255 / 100%);
  border: 1px solid rgb(25 144 255 / 100%);
  border-radius: 3px;
}

.title {
  height: 25px;
  line-height: 25px;
  color: rgb(255 255 255 / 100%);
  text-align: center;
  background-color: rgb(25 144 255 / 100%);
  border: 1px solid rgb(255 255 255 / 100%);
  border-radius: 3px;

  .close {
    position: relative;
    top: 1px;
    right: 5px;
    float: right;
    cursor: pointer;
  }
}

::-webkit-scrollbar {
  width: 3px;
}

.tree {
  height: 580px;
  margin: 20px 8px 8px 20px;
  overflow-y: auto;

  .custom-tree-node {
    display: flex;
    align-items: center;
  }

  .imgTag {
    position: relative;
    top: 0px;
    width: 16px;
    height: 16px;
  }

  .colorTag {
    display: inline-block;
    width: 16px;
    height: 6px;
  }

  .colorAreaTag {
    display: inline-block;
    width: 16px;
    height: 16px;
  }

  .pl-1 {
    text-align: left;
    width: 180px;
    overflow: hidden; //超出的文本隐藏
    text-overflow: ellipsis; //溢出用省略号显示
    white-space: nowrap; //溢出不换行
  }
}
</style>
